#tag layout_block("css_page_level")
<link rel="stylesheet" type="text/css" href="${CONTEXT_PATH}/assets/global/plugins/select2/select2.css"/>
<link rel="stylesheet" type="text/css"
      href="${CONTEXT_PATH}/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>
#end
#tag layout_block("js_page_level")
<script type="text/javascript" src="${CONTEXT_PATH}/assets/global/plugins/select2/select2.min.js"></script>
<script type="text/javascript"
        src="${CONTEXT_PATH}/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
        src="${CONTEXT_PATH}/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"></script>
#end

#tag layout_block("content")
<div class="row">
    <div class="col-md-12">
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                    ${getMessage('net.mayee.alice.web.sys.permission.title.permission_list')}
                </div>
                <div class="actions">
                    <a href="javascript:;" id="dt_reload" class="btn btn-default btn-sm">
                        <i class="fa fa-refresh"></i> ${getMessage('net.mayee.alice.btn.refresh')} </a>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-toolbar">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="btn-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
									    ${getMessage('net.mayee.alice.web.sys.permission.menu_name')}
									</span>
                                    <select class="form-control input-medium select2me" id="menuId" name="SEARCH_menuId">
                                        <option value="-1" selected>${getMessage('net.mayee.alice.select.all')}</option>
                                        #for(sbm : sbmList)
                                        <optgroup label="${getMessage(sbm.messageKey)}">
                                            #set(subM = sbm.subMenuList)
                                            #for(sub : subM)
                                            <option value="${sub.id}">${getMessage(sub.messageKey)}</option>
                                            #end
                                        </optgroup>
                                        #end
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="btn-group pull-right">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="gSearch" placeholder="${getMessage('net.mayee.alice.btn.search')}">
                                    <span class="input-group-btn">
                                        <a href="javascript:;" class="btn submit" id="gSearchBtn"><i
                                                class="icon-magnifier"></i></a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-striped table-condensed table-bordered table-hover" id="oTable">
                    <thead>
                    <tr>
                        <th>${getMessage('net.mayee.alice.web.sys.permission.menu_name')}</th>
                        <th>${getMessage('net.mayee.alice.web.sys.permission.menu_id')}</th>
                        <th>${getMessage('net.mayee.alice.web.sys.permission.permission_name')}</th>
                        <th>${getMessage('net.mayee.alice.web.sys.permission.permission_key')}</th>
                        <th>${getMessage('net.mayee.alice.web.sys.permission.note')}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>
</div>
#end

#tag layout_block("script")
<script>
    var oTable = $('#oTable');
    var el = $(".portlet");
    jQuery(document).ready(function () {
        oTable.on('processing.dt', function (e, settings, processing) {
            if (processing) {
                Metronic.blockUI({
                    target: el,
                    animate: true,
                    overlayColor: 'blue'
                });
            } else {
                Metronic.unblockUI(el);
            }
        }).dataTable({
            "language": {
                url: "${CONTEXT_PATH}/dt/ajax/lag"
            },
            "pagingType": "bootstrap_full_number",
            "sort": false,
            "bLengthChange": false,
            "bServerSide": true,
            "bFilter": false,
            "sAjaxSource": "${CONTEXT_PATH}/sys/perm/ajax/R",
            "bStateSave": false,
            "pageLength": 10,
            "fnServerData": function (sSource, aoData, fnCallback) {
                if($.trim($("#gSearch").val()) != ''){
                    aoData.push({ "name": "GSEARCH", "value": $("#gSearch").val() });
                }
                if($("#menuId option:selected").val() != -1){
                    aoData.push({ "name": "SEARCH_menuId", "value": $("#menuId option:selected").val() });
                }
                $.getJSON(sSource, aoData, function (json) {
                    fnCallback(json)
                });
            }
        });
        $("#dt_reload").click(function () {
            oTable.fnDraw();
        });
        $("#menuId").change(function () {
            oTable.fnDraw();
        });
        $("#gSearchBtn").click(function () {
            oTable.fnDraw();
        });
        $("#gSearch").keypress(function (e) {
            if (e.which == 13) {
                oTable.fnDraw();
            }
        });

    });
</script>
#end
#include ("/layout/layout_main.html")
